<nz-card>
  <nz-alert
    *ngIf="success"
    nzBanner
    nzMessage="Profile Updated"
    nzType="success"
    nzCloseable></nz-alert>
  <nz-form-item *ngIf="errorMessages.length > 0">
    <cvc-form-errors-alert [errors]="errorMessages">
    </cvc-form-errors-alert>
  </nz-form-item>
  <nz-spin
    nzTip="Submitting"
    [nzSpinning]="loading">
    <nz-form-item>
      <nz-form-label nzRequired>Username</nz-form-label>
      <input
        nz-input
        [(ngModel)]="username"
        style="width: 100%" />
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Name</nz-form-label>
      <input
        nz-input
        [(ngModel)]="name"
        style="width: 100%" />
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired>Email</nz-form-label>
      <input
        nz-input
        [(ngModel)]="email"
        style="width: 100%" />
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>User Bio</nz-form-label>
      <textarea
        nz-input
        rows="5"
        [(ngModel)]="bio"
        style="width: 100%"></textarea>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Country</nz-form-label>
      <nz-select
        [(ngModel)]="countryId"
        nzAllowClear
        [nzDropdownMatchSelectWidth]="false"
        nzPlaceHolder="Select a Country"
        nzShowSearch>
        <nz-option
          *ngFor="let country of countries$ | ngrxPush"
          [nzLabel]="country.name"
          [nzValue]="country.id"></nz-option>
      </nz-select>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Area of Expertise</nz-form-label>
      <nz-select
        [(ngModel)]="areaOfExpertise"
        nzAllowClear>
        <nz-option
          nzLabel="Patient Advocate"
          nzValue="PATIENT_ADVOCATE"></nz-option>
        <nz-option
          nzLabel="Clinical Scientist"
          nzValue="CLINICAL_SCIENTIST"></nz-option>
        <nz-option
          nzLabel="Research Scientist"
          nzValue="RESEARCH_SCIENTIST"></nz-option>
      </nz-select>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>ORCID Identifier</nz-form-label>
      <nz-input-group nzAddOnBefore="https://orcid.org/">
        <input
          nz-input
          placeholder="0000-0000-0000-0000"
          [(ngModel)]="orcid"
          style="width: 100%" />
      </nz-input-group>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Personal Website</nz-form-label>
      <input
        nz-input
        [(ngModel)]="url"
        style="width: 100%" />
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>X/Twitter Handle</nz-form-label>
      <nz-input-group nzAddOnBefore="https://twitter.com/">
        <input
          nz-input
          placeholder="username"
          [(ngModel)]="twitterHandle"
          style="width: 100%" />
      </nz-input-group>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>Facebook Profile</nz-form-label>
      <nz-input-group nzAddOnBefore="https://www.facebook.com/">
        <input
          nz-input
          placeholder="username"
          [(ngModel)]="facebookProfile"
          style="width: 100%" />
        </nz-input-group>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label>LinkedIn Profile</nz-form-label>
      <nz-input-group nzAddOnBefore="https://www.linkedin.com/in/">
        <input
          nz-input
          placeholder="username"
          [(ngModel)]="linkedinProfile"
          style="width: 100%" />
      </nz-input-group>
    </nz-form-item>
    <nz-form-item>
      <button
        type="submit"
        nz-button
        nzType="primary"
        nzSize="small"
        style="width: 100%"
        [disabled]="loading || !username || !email"
        (click)="updateProfile()">
        Update Profile
      </button>
    </nz-form-item>
  </nz-spin>
</nz-card>
